<template>
  <div class="chart" ref="chartDom"></div>
</template>

<script setup lang="ts">
import { ECBasicOption } from "echarts/types/dist/shared";
import { onMounted, reactive, ref, toRaw, watch } from "vue";
import Echarts from "../modules/echarts";
import { useGlobalStore } from "../modules/pinia";
interface myChartDt {
  instances: Echarts.ECharts | null;
  option: ECBasicOption;
  width: number;
  height: number;
}
const chartDom = ref<HTMLElement | null>(null);
const globalStore = useGlobalStore();
const myChart: myChartDt = reactive({
  instances: null,
  option: {
    title: {
      text: "📕 其他",
      left: 10,
      top: 10,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    legend: {
      data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    grid: {
      top: "15%",
      right: "6%",
      bottom: "4%",
      left: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: "Email",
        type: "line",
        stack: "Total",
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: [120, 132, 101, 134, 90, 230, 210],
      },
      {
        name: "Union Ads",
        type: "line",
        stack: "Total",
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: [220, 182, 191, 234, 290, 330, 310],
      },
      {
        name: "Video Ads",
        type: "line",
        stack: "Total",
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: [150, 232, 201, 154, 190, 330, 410],
      },
      {
        name: "Direct",
        type: "line",
        stack: "Total",
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: [320, 332, 301, 334, 390, 330, 320],
      },
      {
        name: "Search Engine",
        type: "line",
        stack: "Total",
        label: {
          show: true,
          position: "top",
        },
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: [820, 932, 901, 934, 1290, 1330, 1320],
      },
    ],
  },
  width: 0,
  height: 0,
});

watch(
  [
    () => globalStore.isReady,
    () => globalStore.theme,
    () => myChart.width,
    () => myChart.height,
  ],
  () => {
    initChart();
    updateChart();
    const observer = new ResizeObserver(resizeChart);
    observer.observe(chartDom.value as HTMLElement);
  }
);

onMounted(() => {
  window.addEventListener("resize", resizeChart);
  initChart();
});

function initChart() {
  if (myChart.instances) myChart.instances!.dispose();
  myChart.instances = Echarts.init(
    chartDom.value as HTMLElement,
    globalStore.theme
  );
}

function updateChart() {
  const { instances, option } = toRaw(myChart);
  instances!.setOption(option);
}

function resizeChart() {
  myChart.instances!.resize();
}
</script>

<style scoped></style>
